<template>
  <div class="confirm-outer">
    <div class="confirm-order">
      <div class="section section-order">
        <div class="order-info clearfix">
          <div class="fl">
            <h2 class="title">订单提交成功！去付款咯～</h2>
            <p class="order-time">
              <span>
                请在
                <span class="pay-time-tip">
                  {{ `${time.hour} 小时 ${time.minute} 分 ${time.second} 秒` }}
                </span>
                <span>内完成支付, 超时后将取消订单</span>
              </span>
            </p>
            <p
              v-show="!showDetail"
              class="post-info"
              style="">
              {{ orderMsg.addressMsg }}
            </p>
          </div>
          <div class="fr">
            <div class="total">
              应付总额：
              <span class="money">
                <em>{{ orderMsg.totalPrice }}</em>
                <span>元</span>
              </span>
            </div>
            <a
              href="javascript:;"
              class="show-detail"
              @click="changeShowDetail">
              订单详情
              <i class="iconfont">﹀</i>
            </a>
          </div>
        </div>
        <i class="iconfont">
          <img
            src="//c1.mifile.cn/f/i/17/static/success.png"
            width="80"
            height="80" />
        </i>
        <div
          class="order-detail"
          v-show="showDetail">
          <ul>
            <li class="clearfix">
              <div class="label">订单号：</div>
              <div class="content">
                <span class="order-num">{{ orderMsg.orderNum }}</span>
              </div>
            </li>
            <li class="clearfix">
              <div class="label">收货信息：</div>
              <div class="content">
                {{ orderMsg.addressMsg }}
              </div>
            </li>
            <li class="clearfix">
              <div class="label">商品名称：</div>
              <div class="content">
                <span
                  v-for="(goods, index) of orderMsg.goodsList"
                  :key="index">
                  {{ goods }}
                </span>
              </div>
            </li>
            <li class="clearfix">
              <div class="label">发票信息：</div>
              <div class="content">电子普通发票 个人</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const orderMsg = ref(JSON.parse(sessionStorage.getItem('orderMsg') || ''))
const showDetail = ref<boolean>(false)
const changeShowDetail = () => {
  showDetail.value = !showDetail.value
}
const time = ref({ hour: 0, minute: 15, second: 0 })
const timer = ref<number>()
onMounted(() => {
  timer.value = setInterval(() => {
    if (time.value.second - 1 < 0) {
      time.value.second = 60
      time.value.minute -= 1
    } else {
      time.value.second -= 1
    }
  }, 1000)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style lang="less" scoped>
.confirm-outer {
  background-color: #f5f5f5;
  padding: 38px 0;
  .confirm-order {
    width: 1226px;
    margin: 0 auto;
    .section {
      padding: 30px 48px;
      margin-bottom: 30px;
      background-color: #fff;
      color: #424242;
      padding-left: 183px;
      position: relative;
      .order-info {
        padding: 20px 0;
        .fl {
          float: left;
          .title {
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: 400;
            line-height: 36px;
          }
          .order-time {
            color: #616161;
            margin-bottom: 5px;
            line-height: 2;
            .pay-time-tip {
              margin: 0 5px;
              color: #ff6700;
            }
          }
          .post-info {
            color: #616161;
            transition: height 0.3s ease;
          }
        }
        .fr {
          float: right;
          text-align: right;
          .total {
            margin-bottom: 10px;
            color: #757575;
            .money {
              color: #ff6700;
              font-size: 14px;
              em {
                font-size: 24px;
              }
            }
          }
          .show-detail {
            color: #757575;
            text-decoration: none;
            transition: 0.3s;
            &:hover {
              color: #ff6700;
            }
          }
        }
      }
      > .iconfont {
        width: 80px;
        height: 80px;
        line-height: 80px;
        position: absolute;
        top: 40px;
        left: 50px;
        overflow: hidden;
      }
      .order-detail {
        overflow: hidden;
        transition: height 0.3s;
        ul {
          padding: 20px 0 0 0;
          margin-top: 10px;
          border-top: 1px solid #e0e0e0;
          li {
            line-height: 24px;
            margin-bottom: 8px;
            color: #333;
            .label {
              float: left;
              width: 85px;
            }
            .content {
              float: left;
              span {
                display: block;
              }
              .order-num {
                color: #ff6700;
              }
            }
          }
        }
      }
    }
  }
}
</style>
